<ssl-header></ssl-header>
<div class="ssl-home">
  <div class="banner-wrapper">
    <div class="container">
      <div class="row">
        <div class="col-xs-12 text-center">
          <p class="text logotext">SuSuLink</p>
          <p class="text desc0">统一、快速、免费的链接地址管理</p>
          <div class="text desc1">
            <p>彻底摆脱因浏览器或设备不同，所导致的网页收藏目录不一致的烦恼。</p>
            <p>在这里，已收录了许多常用的链接地址，并会定期上新，您也可自行添加，以便搜索，是您统一的在线收藏夹。</p>
          </div>
          <div class="form-group search-wrapper hidden-xs hidden-sm">
            <input [formControl]="keywords" class="form-control search clearable text-center" placeholder="搜索链接，例如：百度" autocomplete="off" tabindex="0" autocorrect="off" autocapitalize="off" spellcheck="false">
            <i class="glyphicon glyphicon-search"></i>
          </div>
          <div class="form-group search-wrapper hidden-md hidden-lg">
            <input (click)="onSearchAtMobile();" [formControl]="keywords" class="form-control search clearable text-center" placeholder="搜索链接，例如：百度" autocomplete="off" tabindex="0" autocorrect="off" autocapitalize="off" spellcheck="false">
            <i class="glyphicon glyphicon-search"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="recommend-wrapper hidden-sm hidden-xs">
    <ul class="list-inline text-center">
      <li *ngFor="let obj of recommendLinkObjs">
        <a href="{{obj.href}}" title="{{obj.title}}" target="_blank" tabindex="-1" data-toggle="tooltip" data-placement="top">
          <img src="{{obj.logoUrl}}" alt="{{obj.title}}">
        </a>
      </li>
    </ul>
  </div>
  <div class="container list-wrapper">
    <div class="btn-group hidden-xs hidden-sm">
      <button type="button" tabindex="-1" class="btn btn-md btn-default jsc-ssl-btn-common-link" [class.active]="listFlag === 'common-link'" (click)="switchList('common-link')">
        <i class="glyphicon glyphicon-certificate"></i> 常用链接
      </button>
      <button type="button" tabindex="-1" class="btn btn-md btn-default jsc-ssl-btn-user-link" [class.active]="listFlag === 'user-link'" (click)="switchList('user-link')">
        <i class="glyphicon glyphicon-user"></i> 我的链接
      </button>
      <button tabindex="-1" class="btn btn-md btn-success" [routerLink]="['/user-link/insert']" *ngIf="listFlag === 'user-link'">
        <i class="glyphicon glyphicon-plus"></i> 添加链接
      </button>
    </div>
    <div class="btn-group hidden-md hidden-lg">
      <button type="button" tabindex="-1" class="btn btn-sm btn-default jsc-ssl-btn-common-link" [class.active]="listFlag === 'common-link'" (click)="switchList('common-link')">
        <i class="glyphicon glyphicon-certificate"></i> 常用链接
      </button>
      <button type="button" tabindex="-1" class="btn btn-sm btn-default jsc-ssl-btn-user-link" [class.active]="listFlag === 'user-link'" (click)="switchList('user-link')">
        <i class="glyphicon glyphicon-user"></i> 我的链接
      </button>
      <button tabindex="-1" class="btn btn-sm btn-success" [routerLink]="['/user-link/insert']" *ngIf="listFlag === 'user-link'">
        <i class="glyphicon glyphicon-plus"></i> 添加链接
      </button>
    </div>
    <router-outlet></router-outlet>
  </div>
</div>
<ssl-footer></ssl-footer>
